import React, { Component} from 'react'
//css
import {MenuFoldOutlined} from "@ant-design/icons";
import "./aside.scss";
export default class Header extends Component {
    state = {
        collapsed:this.props.collapsed
    }
    //生命周期，监听父级props的值变化
    componentWillReceiveProps({collapsed}){
        this.setState({
            collapsed
        })
    }
    changeCollapsed = ()=>{
        this.props.toggleCollapsed()
    }
    render() {
        const {collapsed} = this.state

        // console.log(collapsed)
        return (
            <div className={collapsed ? "collapsed-close":""}>
                <h1 className={"logo"}><span>LOGO</span></h1>
                <div className="header-wrap">
                    <span className="collapsed-icon"><MenuFoldOutlined onClick={this.changeCollapsed}/></span>
                </div>
            </div>
        )
    }
}
